<template>
  <div class="statistics-container">
    <div class="header">
      <h1>数据统计</h1>
      <button @click="refreshData" class="btn btn-refresh" :disabled="loading">
        <i class="material-icons">refresh</i>
        {{ loading ? '加载中...' : '刷新数据' }}
      </button>
    </div>
    
    <div class="content">
      <div class="stats-grid">
        <div class="stat-card">
          <h3>平台总收入</h3>
          <p class="stat-value">¥{{ stats.totalRevenue }}</p>
          <p class="stat-change">↑ 15% 比上月</p>
        </div>
        
        <div class="stat-card">
          <h3>总订单数</h3>
          <p class="stat-value">{{ stats.totalOrders }}</p>
          <p class="stat-change">↑ 12% 比上月</p>
        </div>
        
        <div class="stat-card">
          <h3>活跃用户</h3>
          <p class="stat-value">{{ stats.activeUsers }}</p>
          <p class="stat-change">↑ 8% 比上月</p>
        </div>
        
        <div class="stat-card">
          <h3>平均订单额</h3>
          <p class="stat-value">¥{{ stats.avgOrderAmount }}</p>
          <p class="stat-change">↑ 5% 比上月</p>
        </div>
      </div>
      
      <div class="chart-section">
        <h2>最近30天数据趋势</h2>
        <div class="chart-placeholder">
          <p>图表功能开发中...</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Statistics',
  data() {
    return {
      stats: {
        totalRevenue: 0,
        totalOrders: 0,
        activeUsers: 0,
        avgOrderAmount: 0,
        todayRevenue: 0,
        todayOrders: 0,
        monthlyRevenue: 0,
        monthlyOrders: 0
      },
      loading: true
    }
  },
  mounted() {
    this.fetchStatistics()
  },
  methods: {
    async fetchStatistics() {
      this.loading = true
      try {
        // 获取仪表板统计数据
        const dashboardResponse = await axios.post('http://localhost:8888/elm/admin/dashboard/stats')
        
        if (dashboardResponse.data.code === 200 || dashboardResponse.data.code === '200') {
          const dashboardData = dashboardResponse.data.result || {}
          
          // 获取用户列表来计算活跃用户，使用与后端 @RequestParam 对齐的参数形式
          const usersResponse = await axios.post('http://localhost:8888/elm/admin/users/list', null, {
            params: {
              page: 1,
              size: 1000
            }
          })
          
          let activeUsers = 0
          if (usersResponse.data.code === 200 || usersResponse.data.code === '200') {
            const users = usersResponse.data.result.users || []
            // 计算活跃用户（状态为1的用户）
            activeUsers = users.filter(user => user.delTag === 1).length
          }
          
          // 计算平均订单金额
          const totalOrders = dashboardData.totalOrders || 0
          const totalRevenue = parseFloat(dashboardData.totalRevenue || 0)
          const avgOrderAmount = totalOrders > 0 ? (totalRevenue / totalOrders) : 0
          
          this.stats = {
            totalRevenue: totalRevenue.toFixed(2),
            totalOrders: totalOrders,
            activeUsers: activeUsers,
            avgOrderAmount: avgOrderAmount.toFixed(2),
            todayRevenue: dashboardData.todayRevenue || 0,
            todayOrders: dashboardData.todayOrders || 0,
            monthlyRevenue: dashboardData.monthlyRevenue || 0,
            monthlyOrders: dashboardData.monthlyOrders || 0
          }
        }
      } catch (error) {
        console.error('获取统计数据失败:', error)
        // 使用默认值
        this.stats = {
          totalRevenue: '0.00',
          totalOrders: 0,
          activeUsers: 0,
          avgOrderAmount: '0.00',
          todayRevenue: '0.00',
          todayOrders: 0,
          monthlyRevenue: '0.00',
          monthlyOrders: 0
        }
      } finally {
        this.loading = false
      }
    },
    
    async refreshData() {
      await this.fetchStatistics()
      alert('数据已刷新')
    },
    
    formatCurrency(amount) {
      return parseFloat(amount || 0).toLocaleString('zh-CN', {
        style: 'currency',
        currency: 'CNY'
      })
    },
    
    formatNumber(num) {
      return parseInt(num || 0).toLocaleString('zh-CN')
    }
  }
}
</script>

<style scoped>
.statistics-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  background: white;
  padding: 20px 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header h1 {
  margin: 0;
  font-size: 24px;
  color: #333;
}

.content {
  flex: 1;
  overflow-y: auto;
  padding: 30px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.stat-card h3 {
  margin: 0 0 10px 0;
  color: #666;
  font-size: 14px;
}

.stat-value {
  margin: 0 0 5px 0;
  font-size: 28px;
  font-weight: 600;
  color: #333;
}

.stat-change {
  margin: 0;
  font-size: 12px;
  color: #4caf50;
}

.chart-section {
  background: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.chart-section h2 {
  margin: 0 0 15px 0;
  font-size: 16px;
  color: #333;
}

.chart-placeholder {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f9f9f9;
  border-radius: 8px;
  color: #999;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.3s;
}

.btn-refresh {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  color: white;
}

.btn-refresh:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
}

.btn-refresh:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}
</style>
